<template>
  <div>
    <el-col :offset="6" :span="12" class="info">
      <i class="el-icon-s-home"
         @click="$router.push('/home')"
         style="position:absolute;
         font-size: 4vh;padding: 1vh;cursor: pointer;z-index: 10;color: #c4bfbf">
      </i>
      <div style="width: auto;
                  height: 20vh;
                  text-align: center;
                  border-bottom: 0.4vh solid white;
                  border-top-left-radius: 4vh;
                  border-top-right-radius: 4vh;
                  background-color: rgba(255,255,255,0.09);
                  backdrop-filter: blur(10px) saturate(180%)">
        <el-upload
            class="avatar-uploader"
            :action="action"
            :show-file-list="false"
            :data="extraData"
            :on-change="beforeFileUpload"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
          <el-image
              class="ava"
              :src="avatarUrl"
              fit="cover"></el-image>
        </el-upload>
      </div>

      <div style="width: auto; height: 10vh;display: flex">
        <h2 @click="chose=1">个人信息</h2>
        <h2 @click="chose=2">修改密码</h2>
      </div>
      <div style="width: auto" v-show="chose===1">
        <div class="MSG">
          <ul>
            <li>
              <span>用户昵称</span>
              {{ infoList.username }}
              <div class="edit">
                <el-button type="text" @click="editClick=1, dialogFormVisible = true">编辑</el-button>
              </div>
            </li>
            <li>
              <span>用&nbsp;户&nbsp;&nbsp;ID</span>
              user_{{ infoList.id }}
              <div class="edit">
                <el-button type="text" disabled>不可编辑</el-button>
              </div>
            </li>
            <li>
              <span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</span>
              {{ allName }}
              <div class="edit">
                <el-button type="text" @click="editClick=2, dialogFormVisible = true">编辑</el-button>
              </div>
            </li>
            <li>
              <span>用户邮箱</span>
              {{ infoList.email }}
              <div class="edit">
                <el-button type="text" @click="editClick=3, dialogFormVisible = true">编辑</el-button>
              </div>
            </li>
            <li>
              <span>手机号码</span>
              {{ infoList.mobile }}
              <div class="edit">
                <el-button type="text" @click="editClick=4, dialogFormVisible = true">编辑</el-button>
              </div>
            </li>
            <li>
              <span>性别</span>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              {{ infoList.sex }}
              <div class="edit">
                <el-button type="text" @click="editClick=5, dialogFormVisible = true">编辑</el-button>
              </div>
            </li>
          </ul>
        </div>
        <el-dialog title="修改信息"
                   :visible.sync="dialogFormVisible"
                   :before-close="handleClose"
                   append-to-body>
          <el-form :model="form" :label-width="formLabelWidth">
            <el-form-item label="用户昵称" v-show="editClick===1">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓氏" v-show="editClick===2">
              <el-input v-model="form.firstName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="名字" v-show="editClick===2">
              <el-input v-model="form.lastName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" v-show="editClick===3">
              <el-input v-model="form.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" v-show="editClick===4">
              <el-input v-model="form.mobile" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" v-show="editClick===5">
              <el-radio-group v-model="form.sex" size="medium">
                <el-radio border label="男"></el-radio>
                <el-radio border label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false, save()">保 存</el-button>
          </div>
        </el-dialog>
      </div>
      <div v-show="chose===2" id="showArea2">
        <el-row v-for="(item, index) in labels" :key="index">
          <el-col :span="6" :offset="2">
            <div class="pwdArea"><p>{{ item.label }}</p></div>
          </el-col>
          <el-col :span="10">
            <el-input size="small" show-password clearable v-model="item.model"></el-input>
          </el-col>
        </el-row>
        <el-button size="small" type="primary" @click="submit">submit</el-button>
      </div>
    </el-col>
  </div>
</template>

<script>
export default {
  name: "perCenter",
  inject: ["reload"],
  data() {
    return {
      action: this.$settings.HOST + '/user/avatar/',
      avatarUrl: '',
      extraData: {
        uploader: sessionStorage.getItem('user_id')
      },
      chose: 1,
      labels: [
        {label: '原密码', model: ''},
        {label: '新密码', model: ''},
        {label: '再次确认新密码', model: ''},
      ],
      uid: sessionStorage.getItem('user_id'),
      editClick: 0,
      dialogFormVisible: false,
      Data: '',
      allName: '',
      form: {
        name: '',
        firstName: '',
        lastName: '',
        email: '',
        sex: '',
      },
      infoList: [],
      formLabelWidth: '120px',
    }
  },
  mounted: function () {
    this.$axios.get(`${this.$settings.HOST}/user/info/${this.uid}/`).then(res => {
      this.infoList = res.data;
      this.allName = res.data.first_name + res.data.last_name;
      if (res.data.sex === 1) {
        this.infoList.sex = '男'
      } else if (res.data.sex === 2) {
        this.infoList.sex = '女'
      }
    }).catch(error => {
      this.$message.error(error.response.data);
    });
    let filters = {};
    filters.uid = sessionStorage.getItem('user_id');
    this.$axios.get(`${this.$settings.HOST}/user/avatar/storage/`, {
      params: filters,
    }).then(response => {
      this.avatarUrl = response.data[0]['avatar'];
    }).catch(error => {
      this.$message.error('获取图片信息失败');
      console.log(error.response.data);
    });
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.$message.success('上传头像成功');
      this.reload();
    },
    beforeFileUpload(file) {
      this.extraData = {
        uploader: sessionStorage.getItem('user_id')
      }
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 5;

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return isLt2M;
    },
    handleClose(done) {
      this.$confirm('确定取消修改？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    save() {
      if (this.editClick === 1) {
        this.Data = this.form.name;
      }
      if (this.editClick === 2) {
        this.Data = this.form.firstName + ',' + this.form.lastName;
      }
      if (this.editClick === 3) {
        this.Data = this.form.email;
      }
      if (this.editClick === 4) {
        this.Data = this.form.mobile;
      }
      if (this.editClick === 5) {
        this.Data = this.form.sex;
      }
      this.$axios.post(`${this.$settings.HOST}/user/change/`, {
        flag: this.editClick,
        uid: this.uid,
        info: this.Data,
      }).then(res => {
        console.log(res.data.msg);
        this.$message({
          message: '信息保存成功',
          type: 'success'
        });
        this.reload();
      }).catch(error => {
        console.log(error.response.data);
      });
    },
    submit() {
      if (this.labels[0].model === this.labels[2].model) {
        this.$message.error('新密码不能与原密码相同');
        return false;
      }
      if (this.labels[1].model !== this.labels[2].model) {
        this.$message.error('请再次确认新密码是否一致');
        return false;
      }
      this.$axios.post(`${this.$settings.HOST}/user/setting/`, {
        origin_pwd: this.labels[0].model,
        new_pwd: this.labels[2].model,
        uid: this.uid,
      }).then(response => {
        this.$message.success('修改成功');
        console.log(response.data.msg);
        this.labels[0].model = '';
        this.labels[1].model = '';
        this.labels[2].model = '';
      }).catch(error => {
        this.$message.error('修改失败，请重试');
        console.log(error.response.data);
      });
    },
  }
}
</script>

<style scoped>
.info {
  height: 100vh;
  background-color: rgba(16, 55, 94, 0.7);
  backdrop-filter: blur(1px);
  border-radius: 4vh;
}

.info .ava {
  margin: 6vh 0;
  width: 22vh;
  height: 22vh;
  border-radius: 50%;
  border: 0.7vh solid white;
}

.info h2 {
  color: #c4bfbf;
  padding-left: 2vw;
  width: 8vw;
  height: 4vh;
  transition-property: all;
  transition-duration: 0.3s;
  z-index: 10;
}

.info h2:hover {
  cursor: pointer;
  height: 4vh;
  width: 8vw;
  border-radius: 12px;
  color: white;
  background-color: rgba(57, 192, 192, 0.38);
}

#showArea2 {
  min-height: 50vh;
}

#showArea2 .el-col {
  padding: 5vh 5vh 0 0;
}

.pwdArea {
  height: 5vh;
}

#showArea2 p {
  margin-block-start: 0;
  float: right;
  margin: 1vh 0;
  color: #eee8e8;
}

#showArea2 .el-button {
  float: right;
  margin: 4vh 15vw;
}

.MSG {
  padding: 1vh 0;
  color: #1DC7B3FF;
}

.MSG ul {
  list-style-type: none;
}

.MSG li {
  padding-bottom: 32px;
  width: 30vw;
}

.MSG .edit {
  position: absolute;
  margin: -31px 25vw;
  cursor: pointer;
  opacity: 0;
}

.MSG li:hover .edit {
  opacity: 1;
}

.MSG span {
  margin-right: 30px;
}
</style>